<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt"
uri="http://java.sun.com/jsp/jstl/fmt" %> <% String path =
request.getContextPath(); String basePath = request.getScheme() + "://" +
request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <base href="<%=basePath%>" />
    <title>茶叶进销存系统 - 财务报表</title>
    <link rel="stylesheet" href="css/global.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
      .chart-container {
        position: relative;
        height: 400px;
        margin: 20px 0;
        background: white;
        border-radius: 8px;
        padding: 20px;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }

      .stat-card {
        background: linear-gradient(135deg, var(--primary-color), #7a8d5d);
        color: white;
        padding: 25px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 4px 15px rgba(139, 158, 107, 0.3);
        transition: transform 0.3s;
      }

      .stat-card:hover {
        transform: translateY(-3px);
      }

      .stat-number {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 1rem;
        opacity: 0.9;
      }

      .filter-row {
        display: flex;
        gap: 15px;
        align-items: end;
        flex-wrap: wrap;
      }

      .filter-group {
        flex: 1;
        min-width: 200px;
      }

      .filter-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
        color: var(--text-regular);
      }

      .tea-icon {
        color: var(--primary-color);
        margin-right: 5px;
      }

      .chart-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <div class="app-container">
      <!-- 侧边栏 -->
      <div class="sidebar" id="sidebar">
        <div class="sidebar-logo" onclick="toggleSidebar()">
          <span><i class="fas fa-leaf tea-icon"></i> 茶叶进销存系统</span>
        </div>

        <div class="sidebar-menu">
          <div
                  class="menu-item "
                  onclick="location.href='views/home.jsp'"
          >
            <i class="fas fa-home"></i>
            <span>系统首页</span>
          </div>
          <div class="menu-item" onclick="location.href='TeaServlet'">
            <i class="fas fa-coffee"></i>
            <span>茶叶管理</span>
          </div>
          <div class="menu-item" onclick="location.href='CategoryServlet'">
            <i class="fas fa-tags"></i>
            <span>分类管理</span>
          </div>
          <div class="menu-item" onclick="location.href='WarehouseServlet'">
            <i class="fas fa-boxes"></i>
            <span>仓库管理</span>
          </div>
          <div class="menu-item" onclick="location.href='OrderServlet'">
            <i class="fas fa-receipt"></i>
            <span>订单管理</span>
          </div>
          <div class="menu-item" onclick="location.href='LogisticsServlet'">
            <i class="fas fa-shipping-fast"></i>
            <span>物流管理</span>
          </div>
          <div class="menu-item" onclick="location.href='SupplierServlet'">
            <i class="fas fa-truck"></i>
            <span>供应商管理</span>
          </div>
          <div class="menu-item active" onclick="location.href='<%=basePath%>purchase/list'">
            <i class="fas fa-truck"></i>
            <span>采购管理</span>
          </div>
          <div class="menu-item" onclick="location.href='CustomerServlet'">
            <i class="fas fa-users"></i>
            <span>客户管理</span>
          </div>
          <div class="menu-item" onclick="location.href='AddressServlet'">
            <i class="fas fa-map-marker-alt"></i>
            <span>地址管理</span>
          </div>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="navbar">
          <div class="navbar-left">
            <h3><i class="fas fa-chart-line tea-icon"></i> 财务报表</h3>
          </div>
          <div class="navbar-right">
            <span
              ><i class="fas fa-user tea-icon"></i>
              欢迎，${username}管理员</span
            >
            <a href="logout" class="el-link el-link--danger ml-10"
              ><i class="fas fa-sign-out-alt"></i> 退出</a
            >
          </div>
        </div>

        <!-- 筛选条件 -->
        <div class="el-card">
          <div class="el-card__header">
            <span><i class="fas fa-filter tea-icon"></i> 筛选条件</span>
          </div>
          <div class="el-card__body">
            <div class="filter-row">
              <div class="filter-group">
                <label for="startDate"
                  ><i class="fas fa-calendar tea-icon"></i>开始日期</label
                >
                <input
                  type="date"
                  id="startDate"
                  class="form-control"
                  value=""
                />
              </div>
              <div class="filter-group">
                <label for="endDate"
                  ><i class="fas fa-calendar tea-icon"></i>结束日期</label
                >
                <input type="date" id="endDate" class="form-control" value="" />
              </div>
              <div class="filter-group">
                <label for="supplierFilter"
                  ><i class="fas fa-truck tea-icon"></i>供应商</label
                >
                <select id="supplierFilter" class="form-control">
                  <option value="">全部供应商</option>
                </select>
              </div>
              <div class="filter-group">
                <button
                  type="button"
                  class="el-button el-button--primary"
                  onclick="loadFinancialData()"
                >
                  <i class="fas fa-search"></i> 查询
                </button>
                <button
                  type="button"
                  class="el-button"
                  onclick="resetFilters()"
                >
                  <i class="fas fa-undo"></i> 重置
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计卡片 -->
        <div class="el-card">
          <div class="el-card__header">
            <span><i class="fas fa-chart-bar tea-icon"></i> 财务概览</span>
          </div>
          <div class="el-card__body">
            <div class="stats-grid">
              <div class="stat-card">
                <div class="stat-number" id="totalPurchaseAmount">¥125,000</div>
                <div class="stat-label">总采购金额</div>
              </div>
              <div class="stat-card">
                <div class="stat-number" id="totalPurchaseCount">45</div>
                <div class="stat-label">采购单数量</div>
              </div>
              <div class="stat-card">
                <div class="stat-number" id="avgPurchaseAmount">¥2,778</div>
                <div class="stat-label">平均采购金额</div>
              </div>
              <div class="stat-card">
                <div class="stat-number" id="monthlyGrowth">+15.6%</div>
                <div class="stat-label">月度增长率</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-grid">
          <div class="el-card">
            <div class="el-card__header">
              <span
                ><i class="fas fa-line-chart tea-icon"></i> 采购趋势分析</span
              >
            </div>
            <div class="el-card__body">
              <div class="chart-container">
                <canvas id="purchaseTrendChart"></canvas>
              </div>
            </div>
          </div>

          <div class="el-card">
            <div class="el-card__header">
              <span><i class="fas fa-pie-chart tea-icon"></i> 供应商占比</span>
            </div>
            <div class="el-card__body">
              <div class="chart-container">
                <canvas id="supplierPieChart"></canvas>
              </div>
            </div>
          </div>
        </div>

        <!-- 详细数据表格 -->
        <div class="el-card">
          <div class="el-card__header">
            <span><i class="fas fa-table tea-icon"></i> 详细数据</span>
            <div>
              <button
                class="el-button el-button--success"
                onclick="exportData()"
              >
                <i class="fas fa-download"></i> 导出数据
              </button>
            </div>
          </div>
          <div class="el-card__body">
            <div class="el-table-container">
              <table class="el-table">
                <thead>
                  <tr>
                    <th>采购单号</th>
                    <th>供应商</th>
                    <th>采购日期</th>
                    <th>采购金额</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="financialTableBody">
                  <tr>
                    <td>PO202401001</td>
                    <td>龙井茶叶供应商</td>
                    <td>2024-01-15</td>
                    <td>¥15,000</td>
                    <td><span class="el-tag el-tag--success">已完成</span></td>
                    <td>
                      <button
                        class="el-button el-button--text"
                        onclick="viewDetail('PO202401001')"
                      >
                        <i class="fas fa-eye"></i> 查看
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>PO202401002</td>
                    <td>铁观音供应商</td>
                    <td>2024-01-16</td>
                    <td>¥8,500</td>
                    <td><span class="el-tag el-tag--warning">进行中</span></td>
                    <td>
                      <button
                        class="el-button el-button--text"
                        onclick="viewDetail('PO202401002')"
                      >
                        <i class="fas fa-eye"></i> 查看
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      let isCollapsed = false;
      let purchaseTrendChart = null;
      let supplierPieChart = null;

      function toggleSidebar() {
        const sidebar = document.getElementById("sidebar");
        isCollapsed = !isCollapsed;
        sidebar.classList.toggle("collapsed", isCollapsed);
        localStorage.setItem("sidebarCollapsed", isCollapsed);
      }

      // 初始化图表
      function initCharts() {
        // 采购趋势图表
        const trendCtx = document
          .getElementById("purchaseTrendChart")
          .getContext("2d");
        purchaseTrendChart = new Chart(trendCtx, {
          type: "line",
          data: {
            labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
            datasets: [
              {
                label: "采购金额",
                data: [12000, 19000, 15000, 25000, 22000, 30000],
                borderColor: "rgb(139, 158, 107)",
                backgroundColor: "rgba(139, 158, 107, 0.1)",
                tension: 0.4,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              title: {
                display: true,
                text: "月度采购趋势",
              },
            },
            scales: {
              y: {
                beginAtZero: true,
                ticks: {
                  callback: function (value) {
                    return "¥" + value.toLocaleString();
                  },
                },
              },
            },
          },
        });

        // 供应商占比图表
        const pieCtx = document
          .getElementById("supplierPieChart")
          .getContext("2d");
        supplierPieChart = new Chart(pieCtx, {
          type: "pie",
          data: {
            labels: [
              "龙井茶叶供应商",
              "铁观音供应商",
              "普洱茶供应商",
              "绿茶供应商",
              "其他",
            ],
            datasets: [
              {
                data: [30, 25, 20, 15, 10],
                backgroundColor: [
                  "rgba(139, 158, 107, 0.8)",
                  "rgba(122, 141, 93, 0.8)",
                  "rgba(107, 122, 77, 0.8)",
                  "rgba(92, 107, 61, 0.8)",
                  "rgba(77, 92, 45, 0.8)",
                ],
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              title: {
                display: true,
                text: "供应商采购占比",
              },
              legend: {
                position: "bottom",
              },
            },
          },
        });
      }

      // 加载财务数据
      function loadFinancialData() {
        const startDate = document.getElementById("startDate").value;
        const endDate = document.getElementById("endDate").value;
        const supplier = document.getElementById("supplierFilter").value;

        // 这里应该发送AJAX请求到后端获取数据
        console.log("查询条件:", { startDate, endDate, supplier });

        // 模拟数据更新
        updateStatistics({
          totalAmount: 125000,
          totalCount: 45,
          avgAmount: 2777.78,
          growth: 15.6,
        });
      }

      // 更新统计数据
      function updateStatistics(data) {
        document.getElementById("totalPurchaseAmount").textContent =
          "¥" + data.totalAmount.toLocaleString();
        document.getElementById("totalPurchaseCount").textContent =
          data.totalCount;
        document.getElementById("avgPurchaseAmount").textContent =
          "¥" + data.avgAmount.toLocaleString();
        document.getElementById("monthlyGrowth").textContent =
          "+" + data.growth + "%";
      }

      // 重置筛选条件
      function resetFilters() {
        document.getElementById("startDate").value = "";
        document.getElementById("endDate").value = "";
        document.getElementById("supplierFilter").value = "";
        loadFinancialData();
      }

      // 导出数据
      function exportData() {
        alert("导出功能开发中...");
      }

      // 查看详情
      function viewDetail(purchaseNo) {
        window.open("purchase/detail?no=" + purchaseNo, "_blank");
      }

      // 页面加载完成后初始化
      window.onload = function () {
        const savedState = localStorage.getItem("sidebarCollapsed");
        if (savedState === "true") {
          document.getElementById("sidebar").classList.add("collapsed");
          isCollapsed = true;
        }

        // 设置默认日期范围（最近30天）
        const endDate = new Date();
        const startDate = new Date();
        startDate.setDate(startDate.getDate() - 30);

        document.getElementById("endDate").value = endDate
          .toISOString()
          .split("T")[0];
        document.getElementById("startDate").value = startDate
          .toISOString()
          .split("T")[0];

        // 初始化图表
        initCharts();
        loadFinancialData();
      };
    </script>
  </body>
</html>
